<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta name="format-detection" content="telephone=no" />
    <title>锁仓冻结</title>
    <link rel="stylesheet" href="../../css/reset.css" />
    <style>
        body {
            width: 100%;
            background-color: #F8F8F8;
            font-size: 0.26rem;
            height: auto;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            font-family: PingFang SC;
            color: #333333;
            padding: 0 0.3rem;
            padding-bottom: 0.35rem;
            box-sizing: border-box;
            padding-top: 0.3rem;
        }

        .showcointype {
            width: 100%;
            height: auto;
            background: linear-gradient(-87deg, rgba(255, 204, 53, 1), rgba(255, 219, 87, 1));
            /* padding-bottom: 0.29rem; */
            padding-top: 0.1rem;
            border-radius: 0.08rem;
        }

        .showcointype ul {
            width: 100%;
            height: auto;
            box-sizing: border-box;
        }

        .showcointype ul li {
            width: 100%;
            height: auto;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 0.32rem 0 0.36rem;
            box-sizing: border-box;
        }

        .btcNum {
            font-size: 0.36rem;
            font-family: PingFang SC;
            font-weight: bold;
            color: rgba(38, 38, 38, 1);
        }

        .showcointype ul li:first-of-type {
            margin-top: 0.3rem;
            margin-bottom: 0.3rem;
        }

        .showcointype ul li:nth-of-type(2) {
            border-top: 1px solid #E6BE33;
        }

        .showcointype ul li:first-of-type>span:last-of-type {
            font-size: 0.24rem;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(38, 38, 38, 0.69);
            line-height: 0.48rem;
        }

        .showcointype ul li:first-of-type>span:last-of-type>span {
            font-size: 0.28rem;
            font-family: DIN Medium;
            font-weight: 400;
            color: rgba(38, 38, 38, 1);
        }

        .showcointype ul li:nth-of-type(2) {
            font-size: 0.28rem;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(38, 38, 38, 0.98);
            line-height: 0.48rem;
            padding-top: 0.25rem;
            padding-bottom: 0.25rem;
        }

        .showcointype ul li:nth-of-type(2) img {
            width: 0.19rem;
            height: 0.11rem;
        }

        .showcointype ul li:nth-of-type(3),
        .showcointype ul li:nth-of-type(4) {
            font-size: 0.24rem;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(38, 38, 38, 0.69);
            line-height: 0.48rem;
        }

        .showcointype ul .hideCalss {
            display: none;
        }

        .showlist {
            width: 6.9rem;
            height: auto;
            background-color: #fff;
            padding-top: 0.37rem;
            margin-top: 0.3rem;
            padding-bottom: 0.46rem;
            border-radius: 0.08rem;
        }

        .listTitle {
            width: 100%;
            height: auto;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: center;
            font-size: 0.3rem;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(38, 38, 38, 0.95);
        }

        .listTitle span {
            margin: 0 0.23rem;
        }

        .listTitle img {
            width: 0.22rem;
            height: 0.17rem;
        }

        .chooseItem {
            width: 100%;
            height: auto;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: center;
            margin-top: 0.51rem;
        }

        .chooseItem span {
            width: 2.57rem;
            height: 0.6rem;
            line-height: 0.6rem;
            text-align: center;
            font-size: 0.24rem;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(38, 38, 38, 0.69);
            border: 1px solid rgba(238, 238, 238, 1);
        }

        .chooseItem span.slt {
            background: rgba(248, 221, 108, 1);
            color: rgba(38, 38, 38, 0.95);
            border-right: none;
        }

        .listbody {
            width: 100%;
            height: auto;
            padding: 0 0.2rem;
            box-sizing: border-box;
            background-color: #fff;
            min-height: 8rem;
        }

        table {
            width: 100%;

        }

        table thead {
            font-size: 0.22rem;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(90, 94, 101, 0.69);
        }

        table thead td {
            height: 0.6rem;
        }

        table tbody {
            font-size: 0.22rem;
            font-family: PingFang SC;
            font-weight: 500;
        }

        table tbody td {
            height: 0.7rem;
            vertical-align: middle;
        }

        .loadMore {
            text-align: center;
            padding: 0.6rem 0;
        }

        .loadMore>span {
            height: 0.48rem;
            padding: 0 0.3rem;
            color: #5A5E65;
            font-size: 0.22rem;
            display: inline-block;
            line-height: 0.48rem;
            border: 0.01rem solid#DCDCDC;
        }

        .toBtm {
            text-align: center;
            padding: .3rem 0;
            font-size: 0.22rem;
            color: #a4a4a4;
        }

        table .close {
            color: #E53939;
        }

        table .notClose {
            color: #30BD90;
        }

        .hideDiv {
            padding-bottom: 0.2rem;
        }

        .hideDiv p {
            overflow: hidden;
            padding: 0 0.32rem;
            font-size: 0.22rem;
        }

        .hideDiv p>span {
            padding: 0.08rem 0;
        }

        .hideDiv p>span:first-child {
            float: left
        }

        .hideDiv p>span:last-child {
            float: right
        }

        .showcointype ul li:nth-of-type(2) img.transform {
            transform: rotate(180deg);
            -ms-transform: rotate(180deg);
            /* Internet Explorer */
            -moz-transform: rotate(180deg);
            /* Firefox */
            -webkit-transform: rotate(180deg);
            /* Safari 和 Chrome */
            -o-transform: rotate(180deg);
            /* Opera */
        }
    </style>
</head>

<body>
    <div class="showcointype">
        <ul>
            <li>
                <span class="btcNum">
                    BTC
                </span>
                <span>
                    可用:
                    <span class="canuse">
                        --
                    </span>
                </span>
            </li>
            <li>
                <span>
                    冻结
                </span>
                <span>
                    <span class="frezzcoinNum">
                        --
                    </span>
                    <img src="../../image/slide_basepower.png" class="trans">
                </span>
            </li>
        </ul>
        <div class="hideDiv">
            <p>
                <span>合约冻结</span>
                <span class="agFreeze">--</span>
            </p>
            <p>
                <span>锁仓冻结</span>
                <span class="scFreeze">--</span>
            </p>
        </div>
    </div>
    <div class="showlist">
        <p class="listTitle">
            <img src="../../image/iconcasdx.png">
            <span>
                冻结记录明细
            </span>
            <img src="../../image/icondkpx.png">
        </p>
        <p class="chooseItem">
            <span class="slt" data-value="HY">
                合约冻结
            </span>
            <span data-value="SC">
                锁仓冻结
            </span>
        </p>
    </div>
    <div class="listbody">
        <table>
            <thead>
                <tr>
                    <td>冻结时间</td>
                    <td>冻结数量</td>
                    <td>解冻日期</td>
                    <td>状态</td>
                </tr>
            </thead>
            <tbody>
                <!-- <tr>
                    <td>2019/2/5 08:30:00</td>
                    <td>0.00000000</td>
                    <td>2019/5/1 08:30:00</td>
                    <td class="notClose">已解冻</td>
                </tr>
                <tr>
                    <td>2019/2/5 08:30:00</td>
                    <td>0.00000000</td>
                    <td>2019/5/1 08:30:00</td>
                    <td class="close">冻结中</td>
                </tr> -->
            </tbody>
        </table>
        <p class="loadMore">
            <span class="moreBtn">加载更多</span>
        </p>
        <p class="toBtm" style="display: none;">到底了</p>
    </div>
</body>

</html>
<script src="../../script/autosize.js"></script>
<script src="../../script/jquery_three_two_one.js"></script>
<script src="../../script/fastclick.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/dotmin.js"></script>
<!--合约model-->
<script type="text/html" id="md">
    {{~it:value:index}}
    <tr>
        <td>{{=value.incomeDate}}</td>
        <td>{{=value.returns}}</td>
        <td>{{=value.endDate}}</td>
        {{?value.state==0}}
        <td class="close">冻结中</td>
        {{??}}
        <td class="notClose">已解冻</td>
        {{?}}
    </tr>
    {{~}}
</script>
<!--锁仓model-->
<script type="text/html" id="md2">
    {{~it:value:index}}
    <tr>
        <td>{{=value.add_time.split(" ")[0]}}</td>
        <td>{{=value.num}}</td>
        <td>{{=value.unfreeze_time.split(" ")[0]}}</td>
        {{?value.status==0}}
        <td class="close">冻结中</td>
        {{??}}
        <td class="notClose">已解冻</td>
        {{?}}
    </tr>
    {{~}}
</script>
<script>
    apiready = function () {
        var app = new APP();
        var pageParam = api.pageParam,//获取页面传参
            coinType = pageParam.chooseType,//获取选择币种
            account = app.getAccount(),//用户数据
            list = [],//公共渲染列表的数据
            curPage = 1, /*当前页*/
            totalPage = 1,/*总页数*/
            pageSize = 10;/*每页加载数量*/
        var chooseValue = "HY";//默认选中合约
        var re = /([0-9]+\.[0-9]{8})[0-9]*/;
        var refour = /([0-9]+\.[0-9]{4})[0-9]*/;
        var retextTwo = /([0-9]+\.[0-9]{2})[0-9]*/;
        if (coinType == "BHPFH") {
            $(".btcNum").text("BHP(分红账户)");
            coinType = "bhp_fh";
        } else if (coinType == "BHP") {
            $(".btcNum").text("BHP(交易账户)");
        } else if (coinType == "BCNY") {
            $(".btcNum").text("余额(OTC)");
        } else {
            $(".btcNum").text(coinType);
        }
        //公共处理页面加载样式，合并数据list
        function style(ajaxData, isdown) {
            var loadMorep = $(".loadMore");//加载更多的P标签
            var tbm = $(".toBtm");//底部到底了的文字
            if (isdown && isdown == true) {
                loadMorep.show();
                list = ajaxData;
                app.stopRefresh();
            } else {
                list = list.concat(ajaxData);
            }
            for (var i = 0; i < list.length; i++) {
                var num = list[i].freeze_num ? 'freeze_num' : 'num';
                list[i][num] = app.sliceNum(list[i][num], 8);//冻结数量默认保留8位
            }
            if (list.length == 0) {
                tbm.text('没有更多数据...');
            } else {
                tbm.text('到底了...')
            }
            if (curPage >= totalPage) {
                loadMorep.hide();
                tbm.show();
            }
            loadMorep = tbm = null;
        }
        //合约冻结获取列表
        function getAgList(callback, isdown) {
            //回调函数 ， 是否下拉刷新
            app.ajax({
                param: {
                    method: "post",
                    url: app.ajaxUrl + "member/contract-frozen-income",
                    data: {
                        values: {
                            token: account.token,
                            currency_code: coinType,
                            page: curPage,
                            pageSize: pageSize
                        }
                    },
                    callback: function (ret, err) {
                        if (ret.code == 200) {
                            var fresh = isdown && isdown == true ? true : false;
                            callback(ret, fresh);
                        } else {
                            app.toast(ret.message);
                        }
                    }
                },
                extra: {
                    isflower: true
                }
            })
        }
        /*合约列表渲染table*/
        function drawAgTable(ret, isdown) {
            totalPage = ret.data.totalPage;
            var freezeNum = 0, lockTotalNum = 0, totalNumber = 0;
            if (coinType == "BHP" || coinType == "USDT") {
                freezeNum = app.sliceNum(ret.data.frozenTotalNum, 4);//总冻结
                lockTotalNum = app.sliceNum(ret.data.lockTotalNum, 4);//锁仓冻结
                totalNumber = app.sliceNum(ret.data.availableAssetTotalNum, 4);
            } else {
                freezeNum = app.sliceNum(ret.data.frozenTotalNum, 8);//总冻结
                lockTotalNum = app.sliceNum(ret.data.lockTotalNum, 8);//锁仓冻结
                totalNumber = app.sliceNum(ret.data.availableAssetTotalNum, 8);
            };
            $(".canuse").text(totalNumber)
            $(".frezzcoinNum").text(freezeNum);
            $(".scFreeze").text(lockTotalNum);
            $(".agFreeze").text(app.numSub(freezeNum, lockTotalNum));
            var ajaxData = ret.data.list;//ajax拿到的数据
            style(ajaxData, isdown);
            var tby = $('.listbody tbody');//tbody
            var md = $("#md");//模板
            var temp = doT.template(md.text());
            tby.html(temp(list));
            tby = md = null;
        }
        /*锁仓冻结获取列表*/
        function getFrozenlist(callback, isdown) {
            app.ajaxPro({
                url: "finance/freeze-coin",
                values: {
                    token: account.token,
                    currency_name: coinType,
                    page: curPage
                },
                openFlower: true
            }, function (ret) {
                if (ret.code == 200) {
                    var fresh = isdown && isdown == true ? true : false;
                    callback(ret, fresh);
                } else {
                    app.toast(ret.message)
                }
            })
        }
        /*锁仓冻结渲染table*/
        function drawFzTable(ret, isdown) {
            totalPage = ret.data.totalPage;
            var ajaxData = ret.data.lists;//ajax拿到的数据
            style(ajaxData, isdown);
            var tby = $('.listbody tbody');//tbody
            var md = $("#md2");//模板
            var temp = doT.template(md.text());
            tby.html(temp(list));
            tby = md = null;
        }
        //公共加载页面函数
        function loadPage(isdown) {
            //isdown是否下拉刷新，或者加载第一页
            if (isdown && isdown == true) {
                var tbm = $(".toBtm");
                tbm.hide();//隐藏到底了提示
                tbm = null;
            }
            getAgList(drawAgTable, isdown);
        }
        loadPage();
        //默认获取锁仓列表拿到上部数据
        $(".showcointype li").eq(1).click(function () {
            $(".hideDiv").slideToggle(80);
            $(".trans").toggleClass('transform');
        })
        //选择列表类型
        $(".chooseItem>span").click(function () {
            var thiz = $(this);
            thiz.addClass('slt').siblings('span').removeClass('slt');
            $('.listbody tbody').empty();
            curPage = 1; totalPage = 0;
            chooseValue = $(this).attr("data-value");
            if (chooseValue == "HY") {
                loadPage(true);
            } else {
                getFrozenlist(drawFzTable, true);
            }
        });
        //点击加载更多
        $(".moreBtn").click(function () {
            if (curPage < totalPage && chooseValue == "HY") {
                curPage++;
                loadPage(false);
                return
            }
            if (curPage < totalPage && chooseValue == "SC") {
                curPage++;
                getFrozenlist(drawFzTable, false);
            }
        });
        app.headerMap();
    }
</script>